<!-- 相册管理 -->
<template>
  <div>

    <a-card
      style="width: 100%"
      :title="`相册（共${albumTotal}册）`"
      :tab-list="tabList"
      :active-tab-key="titleKey"
      @tabChange="key => onTabChange(key)"
      :bordered="false"
      class="br-10"
    >
      <a-button v-has="'content:album:add'" slot="extra" type="primary" @click="handleCreateAlbum">创建相册</a-button>

      <div v-if="titleKey === 'group'">
        <GroupAlbum />
      </div>
      <div v-else-if="titleKey === 'noGroup'">
        <NoGroupAlbum />
      </div>
      <div class="disFlxAC flexEnd">
        <Pagination
          :current="albumCurrent"
          :total="albumTotal"
          :pageChange="pageChange"
          :sizeChange="sizeChange"
          :defaultPageSize="albumSize"
        />
      </div>

      <template slot="tabBarExtraContent">
        <a-button v-has="'content:album:addRow'" v-if="titleKey === 'group'" type="primary" @click="handleCreateGroup"
          >新建分组</a-button
        >
        <!-- <a-button type="primary" style="margin-left: 10px">管理</a-button> -->
      </template>
    </a-card>
    <CreateGroupModal ref="createGroupModal" />
    <CreateAlbumModal ref="createAlbumModal" />
  </div>
</template>

<script>
import GroupAlbum from './groupAlbum'
import NoGroupAlbum from './noGroupAlbum'
import CreateGroupModal from './components/modal/createGroup'
import CreateAlbumModal from './components/modal/createAlbum'
import Pagination from './components/pagination'
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    GroupAlbum,
    NoGroupAlbum,
    CreateGroupModal,
    CreateAlbumModal,
    Pagination
  },
  data() {
    return {
      tabList: [
        {
          key: 'group',
          tab: '分组管理'
        }
        // {
        //     key: 'noGroup',
        //     tab: '未分组',
        // }
      ],
      titleKey: 'group'
    }
  },
  computed: {
    ...mapGetters(['albumTotal', 'groupList', 'albumCurrent', 'albumSize'])
  },
  watch: {},
  methods: {
    ...mapActions(['GetPhotoAlbum', 'SetBelongId']),
    ...mapMutations(['SET_ALBUMCURRENT', 'SET_ALBUMSIZE']),
    onTabChange(key) {
      this.titleKey = key
      this.SET_ALBUMCURRENT(1)
      if (key === 'noGroup') this.SetBelongId(0)
      this.GetPhotoAlbum()
    },
    handleCreateGroup() {
      let obj = {
        type: 'add',
        title: '创建分组',
        data: {}
      }
      this.$refs.createGroupModal.show(obj)
    },
    handleCreateAlbum() {
      if (this.titleKey === 'group' && !this.groupList.length) {
        return this.$message.error('请先创建分组！')
      }
      let obj = {
        type: 'add',
        title: '创建相册',
        data: {}
      }
      this.$refs.createAlbumModal.show(obj)
    },
    pageChange(current, size) {
      // console.log(current, size)
      this.SET_ALBUMCURRENT(current)
      this.GetPhotoAlbum()
    },
    sizeChange(current, size) {
      this.SET_ALBUMCURRENT(1)
      this.SET_ALBUMSIZE(size)
      this.GetPhotoAlbum()
    }
  },
  created() {
    this.SET_ALBUMCURRENT(1)
    this.SET_ALBUMSIZE(40)
  
    
  },
  mounted() {
   
  }
}
</script>
<style scoped></style>
